<template>
  <el-dialog
    v-model="dialogVisible"
    title="提示"
    width="30%"
  >
  <el-form  v-loading="loading" :inline="true"  :model="querys" label-width="120px">
    <el-form-item label="当前状态:">
      <el-input v-model="approvalStatus" disabled  style="width: 200px"/>
      </el-form-item>
    <el-form-item label="申请延期理由:">
      <el-input v-model="approvalReason" disabled  type="textarea" style="width: 200px"/>
      </el-form-item>
      <el-form-item label="同意或拒绝理由:">
      <el-input v-model="querys.approverReason"  type="textarea" style="width: 200px" placeholder="输入同意或拒绝理由"/>
      </el-form-item>
      </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="IsDelay('1')">确认</el-button>
        <el-button type="danger" @click="IsDelay('0')">
          拒绝
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref,defineEmits,reactive ,watch} from 'vue'
import { ElMessageBox } from 'element-plus'
import {tbDelay,tbIsagreeDelay,tbgetDelayReason} from '/@/api/tb/tbaddNext';
import { ElMessage } from 'element-plus';
const dialogVisible = ref(false)
const querys=reactive({
orderId:'',
orderManager: '',
orderStatus: '',
approverReason: '',
})
const loading=ref(true)
 const  approvalReason=ref('')
 const  approvalStatus=ref('')
const emit = defineEmits(['updateForm'])
const Open = async(query) => {
  for (let key in query) {
    querys[key] = ''
    querys[key] = query[key]
    }
  dialogVisible.value=true
}
watch(
  () => querys.orderId, //这样才可以检测到对象里面的值
  async () => {
  const res= await tbgetDelayReason(querys)
  if(res.result){
  loading.value=false
  approvalReason.value=res.data.approverReason
  approvalStatus.value=res.data.approvalStatus
  }
  querys.approverReason=''
  },
  { immediate: true,deep: true}
)
const IsDelay= async(e)=>{
const res= await tbIsagreeDelay({...querys},{status:e})
if(res.result){
  dialogVisible.value=false
  querys.approverReason=''
  emit('updateForm')
  ElMessage({
        message: res.message,
        type: 'success',
      });
} else {
      ElMessage.error('操作失败,请联系管理员');
    }
}
defineExpose({
  Open
})

</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>